<template>
  <div>
    <el-tabs
      v-model="activiting"
      type="card"
      @tab-click="tabClickHandle"
      @tab-remove="removeTab"
    >
      <el-tab-pane
      label="首页"
      name="1"
      >
        <component :is="idx"/>
      </el-tab-pane>
      <el-tab-pane
        closable
        v-for="item in activeTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <component :is="item.component"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import index from '@/components/home/index'
export default {
  name: 'eyTabs',
  data () {
    return {
      idx: index
    }
  },
  methods: {
    removeTab: function (name) {
      this.$store.commit('removeTab', name)
    },
    tabClickHandle: function (tab) {
      console.log(tab.name)
    }
  },
  computed: {
    activeTabs: function () {
      return this.$store.state.activeTabs
    },
    activiting: {
      get: function () {
        return this.$store.state.activiting
      },
      set: function (newValue) {
        this.$store.commit('changeActivite', newValue)
      }
    }
  },
  comments: {
    index
  }
}
</script>

<style scoped>
</style>
